<template>
	<!-- 查看已办任务 -->
	<div class="content">
		<div class="table" >
			<el-table :data="tableData" ref="multipleTable" stripe>
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="appointment.appSiteName" label="场馆名称" align="center"></el-table-column>
				<el-table-column prop="appointment.appAddress" label="场馆所在地" align="center"></el-table-column>
				<el-table-column prop="appointment.appStartTime" label="预约场馆起始时间" align="center"></el-table-column>
				<el-table-column prop="appointment.appEndTime" label="预约场馆结束时间" align="center"></el-table-column>
				<el-table-column prop="appointment.appUsername" label="预约发起人" align="center"></el-table-column>
				<el-table-column prop="appointment.createTime" label="发起时间" align="center"></el-table-column>
				<el-table-column prop="appointment.appRemark" label="备注" align="center"></el-table-column>
				<el-table-column prop="taskEndTime" label="处理时间" align="center"></el-table-column>
				<el-table-column prop="appointment.isAgreed" label="处理结果" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.appointment.isAgreed" style="font-weight: bold;color: green;">同意</span>
						<span v-else style="font-weight: bold;color: red;">拒绝</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页pagination -->
		<div class="pagination">
			<el-pagination
				small
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page.currentPage"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			></el-pagination>
		</div>
	</div>
</template>

<script>
import { appoinmentsTasksListDone } from '@/APIs/index/index'
export default {
	name: 'ViewDone',
	data() {
		return {
			list: [],
			tableData: [],
			page: {
				currentPage: 1,
				pageSize: 10,
				total: 0
			},
			venuesDetailsList: []
		}
	},
	created() {},
	mounted() {
		this.ViewDone()
	},
	methods: {
    // 页面加载完成直接渲染已办数据到表格
		async ViewDone() {
			const { currentPage: pageNum, pageSize } = this.page
			const {
				data: { list = [], total }
			} = await appoinmentsTasksListDone({
				pageNum,
				pageSize
			})
			this.tableData = list.map(item => ({ ...item, visible: false }))
			this.venuesDetailsList = list
			this.page.total = total
			console.log(list, total)
		},
		// 点击下一页
    async handleCurrentChange(val) {
      this.page.currentPage = val
			const { currentPage: pageNum, pageSize } = this.page
			const {
				data: { list = [], total }
			} = await appoinmentsTasksListDone({
				pageNum,
				pageSize
      })
      this.tableData = list.map(item => ({ ...item, visible: false }))
			this.venuesDetailsList = list
			this.page.total = total
			console.log(list, total)
		},
		handleSizeChange() {}
	}
}
</script>

<style>
.table {
	margin-bottom: 15px;
}
</style>